import { Badge, Input, InputNumber, message, Popconfirm, Space, TableColumnsType, Tag, Tooltip, Typography } from 'antd'
import type { BoxLabelVO, ITableData, QueryPurchaseGoodsVO } from './types'
import { NavigateFunction } from 'react-router-dom'
import React from 'react'
import { BOXMARK_STATUS_TEXT, BOXMARK_TYPE_TEXT } from '@/constant/purchase'
import { BadgeColorMap, BadgeColorMapSpec } from '@/constant'
import { CheckOutlined, CloseOutlined, EditOutlined, QuestionCircleOutlined } from '@ant-design/icons'
export const useBoxConfigColumns = ({
  tableData,
  settableData,
  resetTable,
  isChecked,
  onSend,
  isLoading,
}: {
  tableData: ITableData[]
  settableData: React.Dispatch<React.SetStateAction<ITableData[]>>
  resetTable: () => void
  onSend: (info: ITableData) => void
  isLoading: boolean
  isChecked: boolean
}): TableColumnsType<ITableData> => [
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '助记码',
    dataIndex: 'mnemonicCode',
    key: 'mnemonicCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '工厂款号',
    dataIndex: 'factorySpuCode',
    key: 'factorySpuCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划内箱数',
    dataIndex: 'plannedInBoxNum',
    key: 'plannedInBoxNum',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '计划箱规',
    dataIndex: 'plannedBoxSpec',
    key: 'plannedBoxSpec',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: (
      <div>
        <span style={{ marginRight: 6 }}>生产内箱数</span>
        <Tooltip title="一个内箱中有几件货">
          <QuestionCircleOutlined />
        </Tooltip>
      </div>
    ),
    dataIndex: 'inBoxNum',
    key: 'inBoxNum',
    align: 'center',
    width: 150,
    render: (info, rows, index) => {
      return rows.isEdit ? (
        <div style={{ marginLeft: 16, marginRight: 16 }}>
          <InputNumber
            defaultValue={tableData[index]?.inBoxNum || ''}
            onChange={(val: any) => {
              if (val <= 0) return
              tableData[index].inBoxNum = Math.ceil(val)
              settableData([...tableData])
            }}
            precision={0}
            min={1}
          ></InputNumber>
        </div>
      ) : (
        <div>{info || '-'}</div>
      )
    },
  },
  {
    title: (
      <div>
        <span style={{ marginRight: 6 }}>生产内箱个数</span>
        <Tooltip title="一个外箱中有几个内箱">
          <QuestionCircleOutlined />
        </Tooltip>
      </div>
    ),
    dataIndex: 'outBoxNum',
    key: 'outBoxNum',
    align: 'center',
    width: 150,
    render: (info, rows, index) => {
      return rows.isEdit ? (
        <div style={{ marginLeft: 16, marginRight: 16 }}>
          <InputNumber
            defaultValue={tableData[index]?.outBoxNum || ''}
            onChange={(val: any) => {
              if (val <= 0) return
              tableData[index].outBoxNum = Math.ceil(val)
              settableData([...tableData])
            }}
            precision={0}
            min={1}
          ></InputNumber>
        </div>
      ) : (
        <div>{info || '-'}</div>
      )
    },
  },
  {
    title: '生产箱规',
    dataIndex: 'productionBoxSpec',
    key: 'productionBoxSpec',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式名称',
    dataIndex: 'productSimpleVOS',
    key: 'spuName',
    align: 'center',
    width: 300,
    render: (info) => {
      return info?.[0]?.spuName || '-'
    },
  },
  {
    title: '吊牌价',
    dataIndex: 'originSalePrice',
    key: 'originSalePrice',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '商品条码',
    dataIndex: 'productSimpleVOS',
    key: 'skuCode',
    align: 'center',
    fixed: 'right',
    width: 130,
    render: (info) => {
      return info && info.length > 0
        ? info?.map((item: any, index: number) => {
            return (
              <div className="boxconfig_minheight ant-table-cell-ellipsis" key={index}>
                {item.skuCode || '-'}
              </div>
            )
          })
        : '-'
    },
  },
  {
    title: '尺码',
    dataIndex: 'productSimpleVOS',
    key: 'size',
    align: 'center',
    fixed: 'right',
    width: 70,
    render: (info) => {
      return info && info.length > 0
        ? info?.map((item: any, index: number) => {
            return (
              <div className="boxconfig_minheight ant-table-cell-ellipsis" key={index}>
                {item.size || '-'}
              </div>
            )
          })
        : '-'
    },
  },
  {
    title: '颜色',
    dataIndex: 'productSimpleVOS',
    key: 'colorDetailName',
    fixed: 'right',
    align: 'center',
    width: 100,
    render: (info) => {
      return info && info.length > 0
        ? info?.map((item: any, index: number) => {
            return (
              <div className="boxconfig_minheight ant-table-cell-ellipsis" key={index}>
                {item.colorDetailName || '-'}
              </div>
            )
          })
        : '-'
    },
  },
  {
    title: '净重',
    dataIndex: 'productSimpleVOS',
    key: 'netWeight',
    fixed: 'right',
    align: 'center',
    width: 100,
    render: (info, rows, index) => {
      return rows.isEdit
        ? info?.map((it: any, iii: number) => {
            return (
              <div className="boxconfig_minheight" key={iii}>
                <InputNumber
                  value={rows.productSimpleVOS?.[iii]?.netWeight}
                  onChange={(value: any) => {
                    const newValue = value
                    if (newValue <= 0) return
                    if (
                      newValue >= 0 &&
                      rows?.productSimpleVOS?.[iii]?.grossWeight != null &&
                      newValue > rows?.productSimpleVOS?.[iii]?.grossWeight
                    ) {
                      message.warning('净重不能大于毛重！')
                      //根据配置清空
                      if (isChecked) {
                        rows.productSimpleVOS.forEach((product) => {
                          if (product.size == it.size) {
                            product.netWeight = null
                          }
                        })
                      } else {
                        rows.productSimpleVOS[iii].netWeight = null
                      }
                      settableData([...tableData])
                      return
                    }
                    //重量按尺码统一
                    if (isChecked) {
                      rows.productSimpleVOS.forEach((product) => {
                        if (product.size == it.size) {
                          product.netWeight = newValue
                        }
                      })
                    } else {
                      // 否则只更新当前条目的重量
                      rows.productSimpleVOS[iii].netWeight = newValue
                    }
                    settableData([...tableData])
                  }}
                  precision={4}
                  min={0}
                ></InputNumber>
              </div>
            )
          })
        : info && info.length > 0
        ? info?.map((it: any, idx: number) => {
            return (
              <div className="boxconfig_minheight ant-table-cell-ellipsis" key={idx}>
                {it.netWeight || '-'}
              </div>
            )
          })
        : '-'
    },
  },
  {
    title: '毛重',
    dataIndex: 'productSimpleVOS',
    key: 'grossWeight',
    align: 'center',
    fixed: 'right',
    width: 100,
    render: (info, rows, index) => {
      return rows.isEdit
        ? info?.map((it: any, iii: number) => {
            return (
              <div className="boxconfig_minheight" key={iii}>
                <InputNumber
                  value={rows.productSimpleVOS?.[iii]?.grossWeight}
                  onChange={(value: any) => {
                    const newValue = value
                    if (newValue <= 0) return
                    if (
                      newValue >= 0 &&
                      rows.productSimpleVOS?.[iii]?.netWeight != null &&
                      newValue < rows.productSimpleVOS?.[iii]?.netWeight
                    ) {
                      message.warning('毛重不能小于净重！')
                      //根据配置清空
                      if (isChecked) {
                        rows.productSimpleVOS.forEach((product) => {
                          if (product.size == it.size) {
                            product.grossWeight = null
                          }
                        })
                      } else {
                        rows.productSimpleVOS[iii].grossWeight = null
                      }
                      settableData([...tableData])
                      return
                    }

                    //重量按尺码统一
                    if (isChecked) {
                      rows.productSimpleVOS.forEach((product) => {
                        if (product.size == it.size) {
                          product.grossWeight = newValue
                        }
                      })
                    } else {
                      // 否则只更新当前条目的重量
                      rows.productSimpleVOS[iii].grossWeight = newValue
                    }
                    settableData([...tableData])
                  }}
                  precision={4}
                  min={0}
                ></InputNumber>
              </div>
            )
          })
        : info && info.length > 0
        ? info?.map((it: any, idx: number) => {
            return (
              <div className="boxconfig_minheight ant-table-cell-ellipsis" key={idx}>
                {it.grossWeight || '-'}
              </div>
            )
          })
        : '-'
    },
  },
  {
    fixed: 'right',
    title: '操作',
    width: 150,
    align: 'center',
    render: (_, rows, index) => {
      {
        return (
          <Space size="large">
            <Typography.Link
              disabled={isLoading}
              onClick={() => {
                if (!rows.isEdit) {
                  rows.isEdit = true
                } else {
                  onSend(tableData[index])
                }
                settableData([...tableData])
              }}
            >
              {rows.isEdit ? '保存' : '编辑'}
            </Typography.Link>
            {rows.isEdit && (
              <Typography.Link
                type="danger"
                onClick={() => {
                  rows.isEdit = false
                  settableData([...tableData])
                  resetTable()
                }}
              >
                取消
              </Typography.Link>
            )}
          </Space>
        )
      }
    },
  },
]

export const useBoxMarkColumns = ({
  tableData,
  settableData,
  navigate,
  onSave,
  reloadPgae,
}: {
  navigate: NavigateFunction
  tableData: ITableData[]
  settableData: React.Dispatch<React.SetStateAction<ITableData[]>>
  onSave: (tableData: ITableData) => void
  reloadPgae: () => void
}): TableColumnsType<BoxLabelVO> => [
  {
    title: '箱唛条码',
    dataIndex: 'boxLabelCode',
    key: 'boxLabelCode',
    align: 'center',
    fixed: 'left',
    width: 200,
    render: (info, rows) => {
      return rows?.boxLabelStatus == 3 ? (
        <Typography.Link
          onClick={() =>
            navigate(
              '/scan/packing/list?boxLabelId=' +
                rows.boxLabelId +
                '&boxLabelCode=' +
                rows.boxLabelCode +
                '&from=/scan/boxmark/list',
            )
          }
        >
          {info || '-'}
        </Typography.Link>
      ) : (
        <Typography.Text>{info || '-'}</Typography.Text>
      )
    },
  },
  {
    title: '预装数量',
    dataIndex: 'preloadQty',
    key: 'preloadQty',
    align: 'center',
    width: 160,
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {(rows?.boxLabelStatus == 1 || rows?.boxLabelStatus == 3) && rows?.boxLabelType == 2 ? (
            !rows.isEdit ? (
              <Tooltip placement="top" title="编辑">
                <span>{info}</span>
                <EditOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer', margin: '0 6px' }}
                  onClick={() => {
                    if (!rows.isEdit) {
                      tableData[index]['isEdit'] = true
                      settableData([...tableData])
                    }
                  }}
                />
              </Tooltip>
            ) : (
              <Space>
                <div style={{ marginLeft: 16, marginRight: 16 }}>
                  <InputNumber
                    defaultValue={info || ''}
                    precision={0}
                    min={1}
                    onChange={(val) => {
                      tableData[index].preloadQty = val
                      settableData([...tableData])
                    }}
                  ></InputNumber>
                </div>
                <Tooltip placement="top" title="保存">
                  <CheckOutlined
                    style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                    onClick={() => {
                      if (rows.isEdit) {
                        tableData[index]['isEdit'] = false
                        settableData([...tableData])
                        onSave(tableData[index])
                      }
                    }}
                  />
                </Tooltip>
                <Tooltip placement="top" title="取消">
                  <CloseOutlined
                    style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                    onClick={() => {
                      tableData[index]['isEdit'] = false
                      settableData([...tableData])
                      reloadPgae()
                    }}
                  />
                </Tooltip>
              </Space>
            )
          ) : (
            info
          )}
        </Space>
      )
    },
  },
  {
    title: '已扫码数量',
    dataIndex: 'scannedQty',
    key: 'scannedQty',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '箱唛类型',
    dataIndex: 'boxLabelTypeName',
    key: 'boxLabelTypeName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '装箱编号',
    dataIndex: 'loadCode',
    key: 'loadCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '箱唛状态',
    dataIndex: 'boxLabelStatus',
    key: 'boxLabelStatus',
    align: 'center',
    width: 130,
    render: (info) => {
      return info ? <Badge color={BadgeColorMapSpec[info]} text={BOXMARK_STATUS_TEXT[info] || '-'} /> : '-'
    },
  },
  {
    title: '采购单号',
    dataIndex: 'purchaseOrderCode',
    key: 'purchaseOrderCode',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '预约发货单',
    dataIndex: 'reserveInvoiceCode',
    key: 'reserveInvoiceCode',
    align: 'center',
    width: 220,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '助记码',
    dataIndex: 'productSimpleVO',
    key: 'designCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info?.designCode || '-'
    },
  },
  {
    title: '工厂款号',
    dataIndex: 'productSimpleVO',
    key: 'factorySpuCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info?.factorySpuCode || '-'
    },
  },
  {
    title: '款式名称',
    dataIndex: 'productSimpleVO',
    key: 'spuName',
    align: 'center',
    width: 300,
    render: (info) => {
      return info?.spuName || '-'
    },
  },
  {
    title: '商品条码',
    dataIndex: 'productSimpleVO',
    key: 'skuCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info?.skuCode || '-'
    },
  },
  {
    title: '颜色',
    dataIndex: 'productSimpleVO',
    key: 'colorDetailName',
    align: 'center',
    width: 150,
    render: (info) => {
      return info?.colorDetailName || '-'
    },
  },
  {
    title: '尺码',
    dataIndex: 'productSimpleVO',
    key: 'size',
    align: 'center',
    width: 80,
    render: (info) => {
      return info?.size || '-'
    },
  },
  {
    title: (
      <div>
        <span style={{ marginRight: 6 }}>内箱数</span>
        <Tooltip title="一个内箱中有几件货">
          <QuestionCircleOutlined />
        </Tooltip>
      </div>
    ),
    dataIndex: 'inBoxNum',
    key: 'inBoxNum',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: (
      <div>
        <span style={{ marginRight: 6 }}>内箱个数</span>
        <Tooltip title="一个外箱中有几个内箱">
          <QuestionCircleOutlined />
        </Tooltip>
      </div>
    ),
    dataIndex: 'outBoxNum',
    key: 'outBoxNum',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
]
export const usePakingColumns = (): TableColumnsType<ITableData> => [
  {
    title: '箱唛条码',
    dataIndex: 'boxLabelCode',
    key: 'boxLabelCode',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '采购单号',
    dataIndex: 'purchaseOrderCode',
    key: 'purchaseOrderCode',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '助记码',
    dataIndex: 'memoryCode',
    key: 'memoryCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '工厂款号',
    dataIndex: 'factorySpuCode',
    key: 'factorySpuCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式名称',
    dataIndex: 'productName',
    key: 'productName',
    align: 'center',
    width: 300,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '商品条码',
    dataIndex: 'skuCode',
    key: 'skuCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '尺码',
    dataIndex: 'size',
    key: 'size',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: (
      <div>
        <span style={{ marginRight: 6 }}>内箱数</span>
        <Tooltip title="一个内箱中有几件货">
          <QuestionCircleOutlined />
        </Tooltip>
      </div>
    ),
    dataIndex: 'inBoxNum',
    key: 'inBoxNum',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: (
      <div>
        <span style={{ marginRight: 6 }}>内箱个数</span>
        <Tooltip title="一个外箱中有几个内箱">
          <QuestionCircleOutlined />
        </Tooltip>
      </div>
    ),
    dataIndex: 'outBoxNum',
    key: 'outBoxNum',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
]
export const useBoxMarkAddColumns = ({
  selectKeys,
  setselectKeys,
  tableData,
  settableData,
}: {
  selectKeys: React.Key[]
  setselectKeys: React.Dispatch<React.SetStateAction<React.Key[]>>
  tableData: QueryPurchaseGoodsVO[]
  settableData: React.Dispatch<React.SetStateAction<QueryPurchaseGoodsVO[]>>
}): TableColumnsType<QueryPurchaseGoodsVO> => [
  {
    title: '采购订单号',
    dataIndex: 'purchaseOrderCode',
    key: 'purchaseOrderCode',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '助记码',
    dataIndex: 'designCode',
    key: 'designCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '工厂款号',
    dataIndex: 'factorySpuCode',
    key: 'factorySpuCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '商品条码',
    dataIndex: 'skuCode',
    key: 'skuCode',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '尺码',
    dataIndex: 'size',
    key: 'size',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '下单数量',
    dataIndex: 'qty',
    key: 'qty',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '箱规',
    dataIndex: 'boxSpec',
    key: 'boxSpec',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '建议箱唛数量',
    dataIndex: 'suggestBoxLabelQty',
    key: 'suggestBoxLabelQty',
    align: 'center',
    width: 150,
    fixed: 'right',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '已创建箱唛数量',
    dataIndex: 'existBoxLabelQty',
    key: 'existBoxLabelQty',
    align: 'center',
    width: 150,
    fixed: 'right',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '本次新建数量',
    dataIndex: 'createQty',
    key: 'createQty',
    align: 'center',
    width: 150,
    fixed: 'right',
    render: (info, rows, index) => {
      return (
        <>
          {selectKeys?.includes(rows.purchaseOrderCommodityId) ? (
            <InputNumber
              min={1}
              precision={0}
              defaultValue={info || ''}
              onChange={(value: any) => {
                tableData[index].createQty = value
                settableData([...tableData])
              }}
            />
          ) : (
            <div
              className="edit_intable_style"
              onClick={() => {
                setselectKeys([...selectKeys, rows.purchaseOrderCommodityId])
              }}
            >
              {info || '-'}
            </div>
          )}
        </>
      )
    },
  },
]
